<template>
  <div class="pay">
    <div
      class="underline"
      style="width:120px;"
    >
      <span class="title1 color1 zIndex fontBold">我的订单</span>
    </div>
    <div class="login_content">
      <div class="content">
        <div class="contentInfo">
          <div class="contentInfoBox flex justify_between flex_column">
            <p class="font400 content3 color3">
              <!-- 会员续费 / 副会长单位 -->
              活动 / 2021年第四季度营销人员培训
            </p>
            <p class="font400 content2 color6">
              2020-08-01 12:23:42
            </p>
          </div>
        </div>
        <div class="signNum flex justify_between align_center">
          <p class="font400 content3 color3">
            报名人数
          </p>
          <p class="count_num font400 color6 content3">
            1
          </p>
        </div>
        <div
          class="signNum flex justify_between align_center"
          @click="show = true"
        >
          <p class="font400 content3 color3 flex align_center">
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-jifenzhongxin" />
            </svg>
            积分
          </p>
          <p class="font400 color6 content3">
            前往使用>
          </p>
        </div>
        <div class="paySet">
          <div class="title fontBold content3 color3">
            支付方式
          </div>
          <van-radio-group v-model="checked">
            <van-cell-group inset>
              <van-cell
                v-for="(item,index) in paymentList"
                :key="index"
                clickable
              >
                <template #title>
                  <div class="flex align_center">
                    <svg
                      class="icon"
                      aria-hidden="true"
                    >
                      <use :href="item.icon" />
                    </svg>
                    <span class="font400 color6 content3">{{ item.name }}</span>
                  </div>
                </template>
                <template #right-icon>
                  <van-radio
                    :name="item.type"
                    checked-color="#FF7A1F"
                  />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div class="flex align_center">
        <span class="fontBold content3 color2">￥50.00</span>
        <div
          @click="submit"
          class="agree font400 content3 color4"
        >
          提交订单
        </div>
      </div>
    </div>
  </div>
  <!-- 积分支付 -->
  <van-popup
    v-model:show="show"
    round
    position="bottom"
  >
    <div class="integral">
      <p class="integral_title fontBold color1 content4">
        使用积分
      </p>
      <div class="integral_box flex justify_between align_center">
        <div class="integral_left flex align_center">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-jifenzhongxin" />
          </svg>
          <span class="font400 content3 color3">当前积分:1360</span>
        </div>
        <div class="integral_right">
          <van-stepper
            v-model="value"
            input-width="80px"
          />
          <div class="all font400 content2 color4">
            全部使用
          </div>
        </div>
      </div>
      <p class="font400 content2 color2 integralTips">
        *积分支付部分不支持开发票
      </p>
      <div
        @click="confirm"
        class="btn font400 content2 color4"
      >
        确认
      </div>
    </div>
  </van-popup>
  <!-- 重复订单 -->
  <van-dialog
    v-model:show="orderStatus"
    width="90%"
    title="你有未完成的重复订单"
    confirm-button-text="取消并生成新订单"
    confirm-button-color="#FF7A1F"
    @confirm="bank"
  >
    <div class="order">
      <div class="orderBox">
        <!-- <p class="fontBold color1 content4 title">
          你有未完成的重复订单
        </p>-->
        <div class="orderInfo">
          <div class="orderInfoBox">
            <p class="line20">
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#FF7A1F"
                type="primary"
              >
                审核中
              </van-tag>
              <span class="content3 fontBold color3">2021年第四季度营销人员培训</span>
            </p>
            <p class="moeny flex align_center justify_between">
              <span class="content2 font400 color6">2021-07-29</span>
              <span class="content3 font400 color1">￥30.00</span>
            </p>
          </div>
          <div class="confin flex align_center justify_between">
            <div
              @click="bank"
              class="confinItem cancle font400 content2 color3"
            >
              取消订单
            </div>
            <div
              @click="bank"
              class="confinItem see font400 content2 color2"
            >
              查看订单
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
  <!-- <van-popup
    v-model:show="orderStatus"
    :style="{ background: 'initial' }"
  >
  </van-popup>-->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const checked: any = ref([])
const value: any = ref(20)
const show: any = ref(false)
const orderStatus: any = ref(false)
const paymentList: any = ref([
  {
    name: '银行转账',
    type: 1,
    icon: '#icon-zhifu-yinlian'
  },
  {
    name: '微信支付',
    type: 2,
    icon: '#icon-weixinzhifu'
  }
])

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const submit = () => {
  // orderStatus.value = true
  router.push('/find')
}

const bank = () => {
  router.push({ path: '/find/bank', query: { success: 1 } })
}

const confirm = () => {
  show.value = false
}

</script>

<style lang="less" scoped>
.pay {
  padding: 0 30px 80px;
  margin-top: 40px;
  .paySet {
    background-color: #fff;
    padding: 15px 0;
    border-radius: 5px;
    .icon{
      display: inline-block;
      width:25px;
      height:25px;
      margin-right: 9px;
    }
    .title {
      padding: 0 15px;
      margin-bottom: 20px;
    }
  }
  .login_content {
    margin-top: 20px;
    .contentInfo {
      width: 100%;
      background: #fff;
      border-radius: 10px;
      margin: 20px 0;
      .contentInfoBox {
        padding: 15px;
        p:last-child {
          margin-top: 25px;
        }
      }
    }
    .signNum {
      background: #fff;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      .icon {
        width: 17px;
        height: 17px;
        margin-right: 7px;
      }

      .count_num {
        width: 86px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #f7f7f7;
        border-radius: 5px;
      }
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 114px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
      margin-left: 9px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.integral {
  padding: 30px;

  .integral_title {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #cacaca;
  }

  .integralTips {
    margin-top: 20px;
  }
  .integral_left {
    .icon {
      width: 17px;
      height: 17px;
      margin-right: 7px;
    }
  }

  .integral_box {
    margin-top: 17px;
  }
  .integral_right {
    .all {
      width: 96px;
      height: 30px;
      background: #12142e;
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
      margin: 10px auto 0;
    }
  }
  .btn {
    width: 315px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #ff7a1f;
    border-radius: 5px;
    margin-top: 40px;
  }
}
.order {
  // width: 315px;
  // height: 308px;
  // background: #ffffff;
  // box-shadow: 0px 0px 7px 0px rgba(22, 12, 6, 0.1);
  // border-radius: 10px;
  .orderBox {
    padding: 15px;
    .title {
      text-align: center;
    }
    .orderInfo {
      // width: 286px;
      background: #f7f7f7;
      border-radius: 5px;
      // margin-top: 20px;
      .orderInfoBox {
        padding: 15px;
        .tagleft {
          margin-right: 5px;
        }
        .moeny {
          margin-top: 20px;
        }
      }
    }
  }
  .confin {
    border-top: 1px solid #cacaca;
    .confinItem {
      width: 50%;
      text-align: center;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #cacaca;
    }
    .confinItem:last-child {
      border-right: 0;
    }
  }
}
@media (min-width: 750px) {
  .pay {
  padding: 0 30px 80px;
  margin-top: 40px;
  .paySet {
    background-color: #fff;
    padding: 15px 0;
    border-radius: 5px;
    .icon{
      display: inline-block;
      width:25px;
      height:25px;
      margin-right: 9px;
    }
    .title {
      padding: 0 15px;
      margin-bottom: 20px;
    }
  }
  .login_content {
    margin-top: 20px;
    .contentInfo {
      width: 100%;
      background: #fff;
      border-radius: 10px;
      margin: 20px 0;
      .contentInfoBox {
        padding: 15px;
        p:last-child {
          margin-top: 25px;
        }
      }
    }
    .signNum {
      background: #fff;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      .icon {
        width: 17px;
        height: 17px;
        margin-right: 7px;
      }

      .count_num {
        width: 86px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #f7f7f7;
        border-radius: 5px;
      }
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 114px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
      margin-left: 9px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.integral {
  padding: 30px;

  .integral_title {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #cacaca;
  }

  .integralTips {
    margin-top: 20px;
  }
  .integral_left {
    .icon {
      width: 17px;
      height: 17px;
      margin-right: 7px;
    }
  }

  .integral_box {
    margin-top: 17px;
  }
  .integral_right {
    .all {
      width: 96px;
      height: 30px;
      background: #12142e;
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
      margin: 10px auto 0;
    }
  }
  .btn {
    width: 315px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #ff7a1f;
    border-radius: 5px;
    margin-top: 40px;
  }
}
.order {
  // width: 315px;
  // height: 308px;
  // background: #ffffff;
  // box-shadow: 0px 0px 7px 0px rgba(22, 12, 6, 0.1);
  // border-radius: 10px;
  .orderBox {
    padding: 15px;
    .title {
      text-align: center;
    }
    .orderInfo {
      // width: 286px;
      background: #f7f7f7;
      border-radius: 5px;
      // margin-top: 20px;
      .orderInfoBox {
        padding: 15px;
        .tagleft {
          margin-right: 5px;
        }
        .moeny {
          margin-top: 20px;
        }
      }
    }
  }
  .confin {
    border-top: 1px solid #cacaca;
    .confinItem {
      width: 50%;
      text-align: center;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #cacaca;
    }
    .confinItem:last-child {
      border-right: 0;
    }
  }
}
}
</style>
